<!--
 * @Author: QUAN
 * @Date: 2021-10-10 17:52:57
 * @LastEditTime: 2021-12-07 11:35:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \mutong-jimu-h5-activity\src\views\ShareCard\index.vue
-->
<template>
  <div class="share-card">
    <!-- 分享邀请好友 -->
    <div class="share-signal" v-if="imgUrl && this.$UA.isJM">
      <div class="triangle"></div>
      <p>立即分享</p>
    </div>
    <!-- 这里就是渲染之后展示的页面 -->
    <div class="share-page">
      <img :src="imgUrl" alt="" />
    </div>
    <div v-if="imgUrl" class="dec">长按海报图保存至相册</div>

    <!-- 这里是提供渲染的节点 -->
    <!-- type为1代表盲盒的分享 -->
    <div class="share-img" ref="imageWrapper" v-if="shareDataInfo.type === 1">
      <img src="../../assets/images/activity/share-prize.jpg" class="bg" alt="" />
      <img
        :src="shareDataInfo.cover + '?' + new Date().getTime()"
        crossorigin="anonymous"
        @load="loadImg"
        @error="errorImg"
        alt="这是图片"
        class="my-img"
      />
      <div class="name">{{ shareDataInfo.title }}</div>
      <div class="price">{{ shareDataInfo.priceLabel }}</div>
      <canvas id="my-qr-code"></canvas>
    </div>
    <!-- type为2代表互动活动的分享 -->
    <div class="share-img lottery" ref="imageWrapper" v-if="shareDataInfo.type === 2">
      <img
        :src="shareDataInfo.shareImg + '?' + new Date().getTime()"
        crossorigin="anonymous"
        @load="loadImg"
        @error="errorImg"
        class="bg"
        alt=""
      />
      <canvas id="my-qr-code"></canvas>
    </div>
  </div>
</template>
<script>
  import QRCode from 'qrcode';
  import html2canvas from 'html2canvas';
  import mixins from 'mixins';
  import { Toast, Notify } from 'vant';
  export default {
    mixins: [mixins],
    data() {
      return {
        imgUrl: '',
        // 二维码配置
        opts: {
          errorCorrectionLevel: 'H', //容错级别
          type: 'image/png', //生成的二维码类型
          quality: 0.3, //二维码质量
          margin: 0, //二维码留白边距
          width: 90, //宽
          height: 90, //高
          text: 'http://www.xxx.com', //二维码内容
          color: {
            dark: '#000', //前景色
            light: '#fff', //背景色
          },
        },
        shareDataInfo: {},

        // 图片是否加载完毕标志位
        imgIsLoad: false,
      };
    },
    watch: {
      imgIsLoad: {
        handler(newVal, oldVal) {
          if (newVal && !oldVal) {
            this.$nextTick(() => {
              this.init();
            });
          }
        },
      },
    },
    created() {
      // 获取传递的信息
      this.shareDataInfo = JSON.parse(localStorage.getItem('shareImg'));
    },
    mounted() {
      // 这里是禁止微信分享
      this.hideWXShare();
    },
    methods: {
      // 图片加载完毕
      loadImg(e) {
        // Toast(JSON.stringify(val))
        // Notify('加载完成')
        this.imgIsLoad = true;
      },

      // 图片加载失败
      errorImg(e) {
        console.log(e);
        if (e.target.tagName == 'IMG') {
          // Toast('加载失败再加载')
          if (this.shareDataInfo.type === 1) {
            e.src = this.shareDataInfo.cover;
          } else if (this.shareDataInfo.type === 2) {
            e.src = this.shareDataInfo.shareImg;
          }
          this.$forceUpdate();
        }
      },

      init() {
        // 生成二维码
        let msg = document.getElementById('my-qr-code');
        // 将获取到的数据（val）画到msg（canvas）上
        QRCode.toCanvas(
          msg,
          this.shareDataInfo.shareUrl,
          { ...this.opts, ...this.shareDataInfo.myOption },
          function (error) {
            console.log(error);
          },
        );

        // 生成图片
        html2canvas(this.$refs.imageWrapper, {
          allowTaint: true,
          useCORS: true,
          scale: 2,
          dpi: 300, // 处理模糊
        }).then((canvas) => {
          let dataURL = canvas.toDataURL('image/png');
          this.imgUrl = dataURL;
          this.$appService.setNav({
            title: this.shareDataInfo.shareTitle,
            fullscreen: false,
            shareInfo: {
              image: this.imgUrl,
            },
          });
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  .share-card {
    text-align: center;
    // 分享邀请好友
    .share-signal {
      position: fixed;
      top: 10px;
      right: 20px;
      transition: all 0.2s;
      animation: shake 1.5s infinite;
      p {
        width: 100px;
        height: 30px;
        line-height: 30px;
        background: #111111;
        border-radius: 7px;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        margin-left: 180px;
      }
      .triangle {
        width: 0;
        height: 0;
        border-top: 0px solid transparent;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #111111;
        margin-left: 245px;
      }
    }
    // 这里就是渲染之后展示的页面
    .share-page {
      margin-top: 2.3rem;
      img {
        width: 35rem;
        margin: 0 auto;
        -webkit-touch-callout: default !important;
      }
    }
    .dec {
      margin: 1.5rem 0rem;
      color: #111;
      font-size: 1.2rem;
    }
    // 这里是提供渲染的节点
    .share-img {
      position: fixed;
      left: 3000rem;
      width: 37.5rem;
      height: 67.7rem;
      text-align: center;
      .my-img {
        height: 23.3rem;
        width: 23.3rem;
        margin-top: 42%;
        margin-left: 50%;
        transform: translateX(-50%);
        z-index: 10;
      }
      .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 37.5rem;
        height: 67.7rem;
        z-index: -1;
      }
      .name {
        margin-top: 0.3rem;
        font-size: 21px;
        font-weight: 600;
        color: #000;
        z-index: 10;
      }
      .price {
        margin-top: 0.4rem;
        font-size: 17px;
        font-weight: 600;
        color: #000;
        z-index: 10;
      }
      #my-qr-code {
        position: absolute;
        top: 55.7rem;
        left: 25.6rem;
        // margin-left: 22.7rem;
        // margin-top: 10rem;
        z-index: 10;
      }
    }

    .lottery {
      #my-qr-code {
        top: 55.9rem;
        left: 14.5rem;
      }
    }

    @keyframes shake {
      0% {
        transform: translate(0px, 0px);
      }
      50% {
        transform: translate(0px, -10px);
      }
      100% {
        transform: translate(0px, 0px);
      }
    }
  }
</style>
